<template>
    <div class="cp-conditionWarp-organTree" @click="warpClick" :style="cssStyle" v-clickoutside="warpClick">
        <div class="condition-show" @click.stop="handleOpentaggle">
    	<span v-if="orgName == ''" class="placeholder"> {{placeholder ? placeholder : '请选择'}}</span>
            <span class="condition-show-result">{{orgName}}</span>
            <i class="ivu-icon ivu-icon-arrow-down-b ivu-select-arrow"></i>
        </div>
        <div class="condition-down" v-show="open" :style="cssStyle" @click.stop="stopClick">
            <Tree :show-checkbox='checkbox'
                    empty-text="正在加载..."
                    :data="treeData"
                    @on-select-change="selectTree"
                    @on-check-change='checkTree'></Tree>
        </div>
    </div>
</template>
<script>
    
    import Helper from '@/common/helper'
    import Rest from '@/rest'
    import Api from '@/api'
    import clickoutside from '@/components/iview/directives/clickoutside';

    export default {
        data () {
            return {
                open: false,
                orgId: '',
                orgName: '',
                treeData: [],
                cssStyle: '',
                propIds: [],
            }
        },
        directives: {
            clickoutside
        },
        methods: {
            // 初始化
            init(userRoleId, type, caseId, propIds, orgId){
                var that = this;
                if (that.width) {
                    that.getWidth();
                }
                that.resetInit();
                if (that.opened) {
                    that.open = true;
                }
                if (!userRoleId || !type) {
                    console.log("获取组织树结构缺少参数")
                } else {
                    that.getOrgList(userRoleId, type, caseId, orgId);
                }
                if (propIds) {
                    that.propIds = propIds;
                }
            },
            // reset
            resetInit(){
                var that = this;
                that.open = false;
                that.orgId = '';
                that.orgName = '';
                that.treeData = [];
                that.propIds = [];
            },
            getWidth() {
                var that = this;
                that.cssStyle = 'width:' + that.width + 'px'
            },
            // 获取树结构
            getOrgList(userRoleId, type, caseId, orgId){
                var that = this;
                var restApi;
                if(caseId){
                    restApi = Api.params.getOrgsByCaseId;
                }else{
                    restApi = Api.caseManage.case.findChildOrgsByParentOrgId;
                }
                var arr_orgName = [];
                var parms = {
                    "userRoleId": userRoleId,
                    "type": type
                }
                if (caseId) {
                    parms.caseId = caseId;
                }
                if (orgId) {
                    parms.orgId = orgId;
                }
                if(caseId || orgId){
                    Rest.get(restApi, parms).done(function (res) {
                        if (Helper.isSuccess(res)) {
                            that.treeData = getTree(res.data.orgs, orgId);
                            if (that.propIds && that.propIds.length > 0) {
                                that.orgName = arr_orgName.join(',');
                            }
                        } else {
                            that.$Message.error(res.status.msg);
                        }
                    });
                }

                var getTree = function (list, orgId) {
                    if(list instanceof Array){
                        var resultList = [];
                        list.forEach((item) => {
                            var arr = {
                                "title": item.orgName,
                                "orgId": item.orgId,
                                "selected": item.isSelected,
                                "children": item.childList != null ? getTree(item.childList) : null
                            }
                            if (that.propIds && that.propIds.length > 0) {
                                if (that.propIds.indexOf(item.orgId) > -1) {
                                    arr.checked = true;
                                    arr_orgName.push(arr.title);
                                }
                            }
                            resultList.push(arr);
                            if (item.isSelected) {
                                that.orgName = item.orgName;
                            }
                            if(orgId){
                                if(item.childList != null && item.childList && item.childList.length>0){
                                    Helper.set({'isHasChildList':1});
                                }else{
                                    Helper.set({'isHasChildList':0});
                                }
                            }
                        })
                        return resultList;
                    }
                }
            },
            // 选择树节点
            selectTree(item){
                var that = this;
                if (!that.checkbox) {
                    if (that.selectChildOnly) {
                        if (item[0].children && item[0].children.length) {
                            this.$set(item[0], 'expand', !item[0].expand);
                            return;
                        }
                    }
                    that.orgId = item[0].orgId;
                    that.orgName = item[0].title;
                    that.$emit('handleSelectTree', that.orgId, that.orgName);
                    this.open = false;
                }
            },
            checkTree(item) {
                var that = this;
                that.orgId = [];
                that.orgName = [];
                item.forEach((o) => {
                    that.orgId.push(o.orgId)
                    that.orgName.push(o.title)
                })
                that.orgName = that.orgName.join(',')
                that.$emit('handleChecktTree', item);
            },
            handleOpentaggle(){
                this.open = !this.open;
            },
            stopClick() {
            },
            warpClick() {
                this.open = false;
            }
        },
        created() {
        },
        activated() {
        },
        props: {
            placeholder: {
                type: String,
                default: ''
            },
            width: {
                type: String,
                default: ''
            },
            opened: {
                type: Boolean,
                default: false
            },
            checkbox: {
                type: Boolean,
                default: false
            },
            selectChildOnly: {
                type: Boolean,
                default: false
            },
        }

    }
</script>

<style lang="scss" scoped>
    @import "../../assets/sass/install";

    .cp-conditionWarp-organTree {
        display: inline-block;
        width: 270px;
        height: 33px;
        color: #657180;
        position: relative;
        .condition-show {
            display: block;
            height: 32px;
            line-height: 29px;
            padding-left: 8px;
            padding-right: 15px;
            box-sizing: border-box;
            outline: none;
            user-select: none;
            cursor: pointer;
            position: relative;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid #d7dde4;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .placeholder {
                color: #c3cbd6;
            }
            .condition-show-result {

            }
        }
        .condition-down {
            /*display: none;*/
            position: fixed;
            @include transition(500ms);
            @include radius(3px);
            max-height: 260px;
            width: 270px;
            overflow: auto;
            padding: 15px 0;
            background-color: #fff;
            box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
            z-index: 900;
            text-align: left;
            @include overflowCss();
        }
    }

    .ivu-form-item-error {
        .condition-show {
            border-color: #ff3300;
        }
    }
</style>

